import React, { useEffect, useState } from "react";
import {
    Breadcrumb,
    Card,
    Form,
    Input,
    Row,
    Col,
    Select,
    Button,
    Table,
    Modal,
    message,
} from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { MergeRouteComponentProps } from "../../../../router/types";
import { fetchTypeList, addTypeItem } from "../../../../http/question";

interface IProps extends MergeRouteComponentProps {}

type dataSourceType = {
    id: string;
    name: string;
};

/**
 * 列配置
 */
const columns = [
    {
        title: "类型ID",
        dataIndex: "id",
    },
    {
        title: "类型名称",
        dataIndex: "name",
    },
    {
        title: "操作",
        render: (text: string, record: dataSourceType) => (
            <>
                <Button type="link">
                    <EditOutlined />
                    编辑
                </Button>
                <Button type="link" danger>
                    <DeleteOutlined />
                    删除
                </Button>
            </>
        ),
    },
];

const QuestionCategroy: React.FC<IProps> = () => {
    /**
     * 试题类型列表
     */
    const [typeList, setTypeList] = useState<dataSourceType[]>([]);

    /**
     * 添加弹框显示属性
     */
    const [addVisible, setAddVisible] = useState(false);

    /**
     * 试题类型输入框属性
     */
    const [name, setName] = useState("");

    /**
     * 副作用
     */
    useEffect(() => {
        getList();
    }, []);

    /**
     * 请求获取列表数据
     */
    const getList = async () => {
        const res = await fetchTypeList();
        setTypeList(res.data.data);
    };

    /**
     * 添加弹出框
     */
    const AddModal = (
        <Modal
            title="添加试题类型"
            visible={addVisible}
            okText="确定"
            cancelText="取消"
            onOk={async () => {
                if (!name) {
                    message.error("请输入试题类型名称");
                    return;
                }
                const res = await addTypeItem(name);
                if (res.data.code !== 201) {
                    message.error(res.data.message);
                    return;
                }
                // 添加成功，关闭弹框，刷新列表
                setAddVisible(false);
                getList();
            }}
        >
            <Input
                placeholder="请输入试题类型名称"
                onChange={(e) => setName(e.target.value)}
            />
        </Modal>
    );

    return (
        <div className="question-category">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">试题管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">试题分类</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            {/* 试题分类 */}
            <Card>
                <Row>
                    <Button type="primary" onClick={() => setAddVisible(true)}>
                        <PlusOutlined />
                        添加类型
                    </Button>
                </Row>

                {/* 表格 */}
                <Table
                    dataSource={typeList}
                    columns={columns}
                    rowKey={(row) => row.id}
                    bordered
                />
            </Card>

            {/* 添加试题类型弹框 */}
            {AddModal}
        </div>
    );
};

export default QuestionCategroy;
